<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Slot Editor</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/o2mation.js"></script>

    <script type="text/javascript">
        var componentId;
        var dataMap;

        function encodeProperty(properties){
            var obj = {};
            var prop = properties;
            var propName = prop.name;
            var propFlag = prop.flag;
            var propValue = prop.value;

            obj.id = propName;
            obj.name = propName;
            obj.displayName = propName.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
            obj.type = 'Property';
            obj.value = propValue;
            obj.flag = propFlag;
            return obj;
        }

        function encodeAction(actions){
            var obj = {};
            var prop = actions;
            var propName = prop.name;
            var propFlag = prop.flag;
            var propValue = prop.value;

            obj.id = propName;
            obj.name = propName;
            obj.displayName = propName.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
            obj.type = 'Action';
            obj.value = propValue;
            obj.flag = propFlag;
            return obj;
        }

        function encodeLink(id, links){
            var obj = {};
            var prop = links;
            var srcId = prop.srcId;
            var srcSlot = prop.srcSlot;
            var tarId = prop.tarId;
            var tarSlot = prop.tarSlot;

            obj.id = id;
            obj.name = 'Link:' + id;
            obj.displayName = ''
            obj.type = 'Link';
            obj.value = '' + srcId + ':' + srcSlot + ' => ' + tarId + ':' + tarSlot;
            obj.flag = '';
            return obj;
        }

        function requestComponent(id){
            componentId = id;
            requestLoadComponent(id, 0, function(data, status){
                if(status == 200){
                    var jsoncontent = JSON.parse(data);
                    
                    var objArray = new Array();
                    for(i in jsoncontent.properties){
                        var obj = encodeProperty(jsoncontent.properties[i]);
                        if(obj != undefined)
                            objArray.push(obj);
                    }

                    for(i in jsoncontent.actions){
                        var obj = encodeAction(jsoncontent.actions[i]);
                        if(obj != undefined)
                            objArray.push(obj);
                    }

                    for(i in jsoncontent.links){
                        var obj = encodeLink(i, jsoncontent.links[i]);
                        if(obj != undefined)
                            objArray.push(obj);
                    }
                    console.log(objArray)
                    $('#pg').datagrid('loadData', objArray);
                }
            });
        }
    
        function add_link(){
            $('#add_link_dlg').dialog('open');
        }

        function add_action(){
            
        }

        function refresh(){
            requestComponent(componentId);
        }

        function delete_slot(){
            
        }
        var src_id;
        var src_slot_name;
        var tar_id;
        var tar_slot_name;
        function selectSrcId(node){
            src_id = node.id;
            requestLoadComponent(src_id, 0, function(data, status){
                if(status == 200){
                    var json = JSON.parse(data);
                    var objArray = new Array();

                    for(i in json.properties){
                        p = json.properties[i];
                        var obj = {};
                        obj.id = p.name;
                        obj.text = p.name.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
                        obj.iconCls = 'icon-property';
                        objArray.push(obj);
                    }

                    for(i in json.actions){
                        p = json.actions[i];
                        var obj = {};
                        obj.id = p.name;
                        obj.text = p.name.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
                        obj.iconCls = 'icon-action';
                        objArray.push(obj);
                    }
                    $('#src_slot_tree').tree('loadData', objArray);
                }
            });
        }

        function selectSrcSlot(node){
            src_slot_name = node.id;
        }

        function selectTarId(node){
            tar_id = node.id;
            requestLoadComponent(tar_id, 0, function(data, status){
                if(status == 200){
                    var json = JSON.parse(data);
                    var objArray = new Array();

                    for(i in json.properties){
                        p = json.properties[i];
                        var obj = {};
                        obj.id = p.name;
                        obj.text = p.name.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
                        obj.iconCls = 'icon-property';
                        objArray.push(obj);
                    }

                    for(i in json.actions){
                        p = json.actions[i];
                        var obj = {};
                        obj.id = p.name;
                        obj.text = p.name.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()).replace('_', ' ');
                        obj.iconCls = 'icon-action';
                        objArray.push(obj);
                    }
                    $('#tar_slot_tree').tree('loadData', objArray);
                }
            });
        }

        function selectTarSlot(node){
            tar_slot_name = node.id;
        }

        function link_added(){
            requestCreateLink(src_id, src_slot_name, tar_id, tar_slot_name, function(data, status){
                if(status == 404){
                    alert("Failed to add links");
                }
            });
        }

        function main(){

        }
    </script>
</head>
<body onload = "main()">
    <h1>Property Editor</h1>
    <div style="margin:20px 0;"></div>
    <div id="add_link_dlg" class="easyui-dialog" title="Add Link" data-options="iconCls:'icon-save', buttons: '#dlg-buttons', closed:true" style="width:800px;height:450px;padding:2px">
        <div class="easyui-layout" style="width:780px;height:350px;">
            <div data-options="region:'west'" title="From" style="width:380px;">
                <div class="easyui-layout" style="width:350px;height:350px;">
                    <div data-options="region:'west'" title="Source Component" style="width:170px;">
                        <ul id="src_comp_tree" class="easyui-tree" data-options="
                                                url: '/navigator',
                                                method: 'get',
                                                onClick:function(node){
                                                    selectSrcId(node)
                                                }
                                            "></ul>
                    </div>
                    <div data-options="region:'east'" title="Source Slot" style="width:170px;">
                        <ul id="src_slot_tree" class="easyui-tree" data-options="dnd:false,
                                                onClick:function(node){
                                                    selectSrcSlot(node)
                                                }" ></ul>
                    </div>
                </div>
            </div>

            <div data-options="region:'east'" title="To" style="width:380px;">
                <div class="easyui-layout" style="width:350px;height:350px;">
                    <div data-options="region:'west'" title="Target Component" style="width:170px;">
                        <ul id="tar_comp_tree" class="easyui-tree" data-options="
                                                url: '/navigator',
                                                method: 'get',
                                                onClick:function(node){
                                                    selectTarId(node);
                                                }
                                            "></ul>
                    </div>
                    <div data-options="region:'east'" title="Target Slot" style="width:170px;">
                        <ul id="tar_slot_tree" class="easyui-tree" data-options="dnd:false,
                                            onClick:function(node){
                                                selectTarSlot(node);
                                            }" ></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="link_added()">Ok</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#add_link_dlg').dialog('close')">Cancel</a>
    </div>
    <table id="pg" class="easyui-datagrid" style="width:70%" data-options="
                showGroup:true,
                columns:[[
                    {field:'name',title:'Name',width:100,sortable:true},
                    {field:'displayName',title:'DisplayName',width:100,sortable:true},
                    {field:'type',title:'Type',width:100,sortable:true},
                    {field:'value',title:'Value',width:100,sortable:true},
                    {field:'flag',title:'Flag',width:100,sortable:true}
                ]],
                scrollbarSize:0
            ">
    </table> 
    <div style="margin:20px 0;"></div> 
    <button onclick="add_link()" style="width:100px;">Add Link</button>  
    <button onclick="add_action()" style="width:100px;">Add Action</button>
    <button onclick="delete_slot()" style="width:100px;">Delete</button>
    <button onclick="refresh()" style="width:100px;">Refresh</button>
</body>
</html>